<template>
<div>
  <div class="views1">
    <h2>节点一</h2>
    <div id="device_1" class="dbox">
      <img src="../../../../static/image/icons/Tem.png" >
      温度:<p>{{Tem_mes}}℃</p>
    </div>
    <div id="device_2" class="dbox">
      <img src="../../../../static/image/icons/Hum.png" >
      湿度:<p>{{Hum_mes}}%</p>
    </div>
    <div id="device_3" class="dbox">
      <img src="../../../../static/image/icons/Lig.png" >
      照明:<p>{{Lig_mes}}lx</p>
    </div>
    <div id="device_4" class="dbox">
      <img src="../../../../static/image/icons/co2.png" >
      二氧化碳浓度:<p>{{co2_mes}}</p>
    </div>
  </div>
  <div class="views1">
    <h2>节点二</h2>
    <div id="device_1" class="dbox">
      <img src="../../../../static/image/icons/Tem.png" >
      温度:<p>{{Tem_mes}}℃</p>
    </div>
    <div id="device_2" class="dbox">
      <img src="../../../../static/image/icons/Hum.png" >
      湿度:<p>{{Hum_mes}}%</p>
    </div>
    <div id="device_3" class="dbox">
      <img src="../../../../static/image/icons/Lig.png" >
      照明:<p>{{Lig_mes}}lx</p>
    </div>
    <div id="device_4" class="dbox">
      <img src="../../../../static/image/icons/co2.png" >
      二氧化碳浓度:<p>{{co2_mes}}</p>
    </div>
  </div>
  <div class="views1">
    <h2>节点三</h2>
    <div id="device_1" class="dbox">
      <img src="../../../../static/image/icons/Tem.png" >
      温度:<p>{{Tem_mes}}℃</p>
    </div>
    <div id="device_2" class="dbox">
      <img src="../../../../static/image/icons/Hum.png" >
      湿度:<p>{{Hum_mes}}%</p>
    </div>
    <div id="device_3" class="dbox">
      <img src="../../../../static/image/icons/Lig.png" >
      照明:<p>{{Lig_mes}}lx</p>
    </div>
    <div id="device_4" class="dbox">
      <img src="../../../../static/image/icons/co2.png" >
      二氧化碳浓度:<p>{{co2_mes}}</p>
    </div>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      Tem_mes: '0.0',
      Hum_mes: '0.0',
      Lig_mes: '0.0',
      co2_mes: '0.0'
    }
  },
  methods: {
    getlig() {
      this.$http.get('data/getlight')
        .then((res) => {
          this.temp = console.log(res)
          this.Lig_mes = res.data.data.data
        })
    },
    gettem() {
      this.$http.get('data/getTem')
        .then((res) => {
          this.temp = console.log(res)
          this.Tem_mes = res.data.data.data
        })
    },
    gethum() {
      this.$http.get('data/getHum')
        .then((res) => {
          this.temp = console.log(res)
          this.Hum_mes = res.data.data.data
        })
    },
    getco2() {
      this.$http.get('data/getCo2')
        .then((res) => {
          console.log("zhaize")
          this.temp = console.log(res)
          this.co2_mes = res.data.data.data
        })
    }
  },
  created: function () {
    this.timer1 = setInterval(this.getlig, 1000)
    this.timer1 = setInterval(this.gettem, 1000)
    this.timer1 = setInterval(this.gethum, 1000)
    this.timer1 = setInterval(this.getco2, 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer1)
  }
}
</script>

<style>
body {
  color:aliceblue;
}
.views1 h2 {
  margin-left:42%;
  margin-top:0;
  margin-bottom:10px;
  float:left;
}
.dbox {
  width: 70%;
  height: 30px;
  margin-left: 13%;
  margin-bottom: 20px;
  font-size: 20px;
  border-style: solid;
  border-radius: 10px;
  border-width: 1.5px;
  box-shadow: 0 0 5px 5px rgb(200, 200, 200);
  float:left;
}
.dbox img {
  width:20px;
  height:20px;
}
.dbox p {
  float:right;
  margin-top:0;
}
/* .views1 {
  width: 500px;
  height: 600px;
  float: left;
  margin-bottom: 20px;
  margin-left: 60px;
  background-size: 100% 100%;
  box-shadow: 0 0 5px 5px rgb(200, 200, 200);
  border-radius: 10px;
}
.views1 h2 {
  margin-left: 42%;
} */
</style>
